<!DOCTYPE html>
<html  class="iframe-h">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
	</head>
	<body  class="iframe-h">
	<div class="wrap-container email-wrap clearfix">
		<div class="row">
			<div class="email-edge col-lg-2">
				<button class="layui-btn layui-btn-normal email-write-btn" id="write-email-btn">写信</button>
				<dl class="email-folder">
					<dt>文件夹</dt>
					<dd>
						<a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe639;</i>收件箱<button class="layui-btn  layui-btn-danger layui-btn-mini f-r">12</button></a>
					</dd>
					<dd>
						<a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe603;</i>发信</a>
					</dd>
					<dd>
						<a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe602;</i>草稿<button class="layui-btn layui-btn-warm layui-btn-mini f-r">2</button></a>
					</dd>
					<dd>
						<a href="javascript:;" data-url="email-list.html"><i class="layui-icon">&#xe640;</i>垃圾箱</a>
					</dd>
				</dl>
				<dl class="email-classify">
					<dt>分类</dt>
					<dd>
						<a href="javascript:;"><i class="layui-icon icon-blue">&#xe617;</i>工作</a>
					</dd>
					<dd>
						<a href="javascript:;"><i class="layui-icon icon-green">&#xe617;</i>文档</a>
					</dd>
					<dd>
						<a href="javascript:;"><i class="layui-icon icon-wran">&#xe617;</i>社交</a>
					</dd>
					<dd>
						<a href="javascript:;"><i class="layui-icon icon-red">&#xe617;</i>广告</a>
					</dd>
					<dd>
						<a href="javascript:;"><i class="layui-icon icon-gray">&#xe617;</i>客户端</a>
					</dd>
				</dl>
				<dl class="email-label">
					<dt>标签</dt>
					<dd>
						<button class="layui-btn layui-btn-primary layui-btn-small">朋友</button>
						<button class="layui-btn layui-btn-primary layui-btn-small">工作</button>
						<button class="layui-btn layui-btn-primary layui-btn-small">孩子</button>
						<button class="layui-btn layui-btn-primary layui-btn-small">关系</button>
						<button class="layui-btn layui-btn-primary layui-btn-small">家庭</button>
						<button class="layui-btn layui-btn-primary layui-btn-small">电影</button>
					</dd>
					
				</dl>
			</div>
			<div class="col-lg-10">
				<div class="email-content">
					<div class="email-content-title layui-form">
						<span class="write-title">收件箱 (16)</span>
					</div>
					<div class="email-tool-btn clearfix">
						<div class="col-lg-6 email-tool-btn-left">
							<button class="layui-btn layui-btn-small layui-btn-primary" id='email-refresh-btn' data-title='刷新'>
							  <i class="layui-icon">&#x1002;</i>
							</button>
							<button class="layui-btn layui-btn-small layui-btn-primary" id="email-read-btn" data-title='已读'>
							  <i class="layui-icon">&#x1002;</i>
							</button>
							<button class="layui-btn layui-btn-small layui-btn-primary" id='email-important-btn' data-title='重要'>
							  <i class="layui-icon">&#xe600;</i>
							</button>
							<button class="layui-btn layui-btn-small layui-btn-primary" id='email-del-btn' data-title='删除'>
							  <i class="layui-icon">&#xe640;</i>
							</button>
						</div>
						<div class="col-lg-6 email-tool-btn-right">
							<div class="layui-form-item">
								<div class="layui-inline">
									<input type="text" name="title" required lay-verify="required" placeholder="搜索邮件标题" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-inline">
									<button class="layui-btn layui-btn-normal search-btn">搜索</button>
								</div>
								
							</div>
						</div>
					</div>
					<div class="layui-form email-list">
						<table class="layui-table" lay-even lay-skin="nob">
							<colgroup>
								<col width="50">
								<col width="200">
								<col>
								<col class="hidden-xs" width="150">
							</colgroup>
							<thead>
								<tr>
									<th><input type="checkbox" name="" lay-skin="primary" lay-filter="emailAllChoose"></th>
									<th class="hidden-xs">来源</th>
									<th>名称</th>
									<th class="hidden-xs">创建时间</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">淘宝网</td>
									<td><a href="javascript:;">史上最全！淘宝双11红包疯抢攻略！</a></td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">淘宝网</td>
									<td>亲，双11来啦！帮你挑货，还送你4999元红包！仅此一次！</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">Amaze UI</td>
									<td>Amaze UI Beta2 发布</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
								<tr>
									<td><input type="checkbox" name="" lay-skin="primary"></td>
									<td class="hidden-xs">玩具</td>
									<td>历史邮件</td>
									<td class="hidden-xs">1989-10-14</td>
								</tr>
							</tbody>
						</table>
						<div id="email-page" style="text-align: center;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use(['form', 'laypage', 'jquery','layer'], function() {
				var form = layui.form(),
					layer = layui.layer,
					laypage = layui.laypage,
					$ = layui.jquery;
				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');	
				
				$('#write-email-btn').on('click',function(){
					parent.page("写邮件", 'email-write.html', iframeObj, w = "700px", h = "600px");
				})
				//列表
				$('.email-folder').on('click','a',function(){
					var url=$(this).attr('data-url');
					$('#iframeEmail').attr('src',url);
					
				})	
				$('.email-tool-btn .f-l').on('mouseenter','button',function(){
					var title=$(this).attr('data-title');
					var id='#'+$(this).attr('id');
					layer.tips(title, id, {
						tips: [1, '#444c63'], 
						time: 1000
					});
				})
				//分页
				laypage({
				    cont: 'email-page'
				    ,pages: 10
				    ,skin: '#1E9FFF'
				  });
				form.on('checkbox(emailAllChoose)', function(data) {
					var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
					child.each(function(index, item) {
						item.checked = data.elem.checked;
					});
					form.render('checkbox');
				});
		
				form.render();
				//非手机端，设置高度
				if(window.innerWidth>=768){
					$('.email-content').css('height',window.innerHeight-30);
				}
				$(window).resize(function(){
					$('.email-content').css('height',window.innerHeight-30);
				})
			});
	</script>
</body>
</html>